<template>
  <div>
    <el-form v-model="formData" label-position="top">
      <el-form-item label="选择素材">
        <el-button type="primary" size="small" @click="addMaterial"
          >添加素材</el-button
        >
      </el-form-item>
      <el-form-item>
        <TransitionGroup
          @dragover="handleDragOver"
          @drop="handleDrop"
          @dragenter="handleDragEnter"
          @dragend="handleDragEnd"
          ref="dragParentRef"
          tag="div"
          name="drag"
          class="text-content"
        >
          <div
            class="text-list"
            draggable="true"
            :id="item.id"
            @dragstart="handleDragstart($event, item)"
            v-for="(item, index) in formData.advancedConfig?.urlList"
            :key="index"
          >
            <div class="text-list-header">
              <el-text truncated class="w-140" :title="item.title">
                {{ item.title }}
              </el-text>
              <div class="text-list-right">
                <el-icon @click="deleteMaterial(item, index)"
                  ><Delete
                /></el-icon>
              </div>
            </div>
            <div class="text-list-content">
              <label>
                播放时长：
                <el-input-number
                  v-model="item.time"
                  class="text-list-input"
                  @focus="handleFocus"
                  controls-position="right"
                  step-strictly
                >
                  <template #suffix>
                    <span>s</span>
                  </template>
                </el-input-number>
              </label>

              <label>
                投放次数：
                <el-input-number
                  v-model="item.count"
                  class="text-list-input"
                  controls-position="right"
                  @focus="handleFocus"
                  step-strictly
                ></el-input-number>
              </label>
              <label>
                投放时长：
                <el-text>{{ item.timeSum }}s</el-text>
              </label>
            </div>
          </div>
        </TransitionGroup>
      </el-form-item>
    </el-form>
    <!-- 添加素材 -->
    <chooseMaterial
      v-model="dialogVisible"
      :columns="columns"
      :customParams="customParams"
      :selectCheckBox="selectCheckBox"
      ref="chooseMaterialRef"
      @submit="submit"
    ></chooseMaterial>
  </div>
</template>
<script setup>
import { watch } from 'vue'
import { deepClone } from '../../utils'
import chooseMaterial from './chooseMaterial.vue'
import { layoutType } from '../../config/layoutType'
let formData = defineModel()
let dialogVisible = ref(false)
let columns = ref([
  {
    type: 'selection',
    label: '序号',
  },
  {
    type: 'index',
    label: '序号',
    width: '60',
  },
  {
    label: '标题',
    prop: 'title',
  },
  {
    label: '关键字',
    prop: 'keywords',
  },
  {
    label: '缩略图',
    prop: 'presignedObjectUrl',
    type: 'slot',
  },
  {
    label: '描述',
    prop: 'describes',
  },
])
let chooseMaterialRef = ref()
let customParams = ref({})
let selectCheckBox = ref([])
watch(
  () => formData.value.advancedConfig,
  (newVal) => {
    if (newVal) {
      newVal?.urlList.map((item) => {
        return (item.timeSum = (item.time || 0) * (item.count || 0))
      })
    }
  },
  {
    deep: true,
    immediate: true,
  },
)

let submit = (res) => {
  formData.value.advancedConfig.urlList = res
}
// 添加素材
let addMaterial = () => {
  dialogVisible.value = true
  toggleParams(formData.value.type)
  let list = []
  if (
    formData.value.advancedConfig.urlList &&
    formData.value.advancedConfig.urlList.length
  ) {
    list = deepClone(formData.value.advancedConfig.urlList)
  }
  selectCheckBox.value = list
}
// 删除素材
let deleteMaterial = (res, index) => {
  if (formData.value.advancedConfig.urlList.length) {
    formData.value.advancedConfig.urlList.splice(index, 1)
    chooseMaterialRef.value.setCheckboxRow(res)
  }
}
let handleFocus = () => {
  formData.value.active = true
}
function toggleParams(type) {
  if (type == layoutType.Text) {
    customParams.value = {
      type: 0,
      approveState: 2,
    }
  } else if (type == layoutType.Image) {
    customParams.value = {
      type: 1,
      approveState: 2,
    }
  } else if (type == layoutType.Video) {
    customParams.value = {
      type: 2,
      approveState: 2,
    }
  }
}
/******************拖拽******************* */
let sourceNode = null
let targetIndex = null
let dragParentRef = ref()
let handleDragstart = function (event, res) {
  event.dataTransfer.setData('sourceData', JSON.stringify(res))
  event.dataTransfer.effectAllowed = 'move'

  setTimeout(() => {
    event.target.classList.add('moving')
  }, 0)
  sourceNode = event.target
}
// 拖拽
let handleDrop = (event) => {
  event.dataTransfer.effectAllowed = 'move'
  let data = event.dataTransfer.getData('sourceData')
  try {
    let subassemblyData = JSON.parse(data)
    // 删除拖拽元素
    for (let i = 0; i < formData.value.advancedConfig?.urlList.length; i++) {
      if (formData.value.advancedConfig?.urlList[i].id == subassemblyData.id) {
        formData.value.advancedConfig?.urlList.splice(i, 1)
        i--
        break
      }
    }
    console.log(1111111111, targetIndex)
    formData.value.advancedConfig?.urlList.splice(
      targetIndex,
      0,
      subassemblyData,
    )
  } catch (err) {
    console.error(err)
  }
}
// 拖拽结束
let handleDragOver = (e) => {
  e.dataTransfer.dropEffect = 'move'
  e.preventDefault()
  // 设置允许放置
}
// 拖拽进入
let handleDragEnter = (e) => {
  e.preventDefault()
  if (e.target === dragParentRef.value || e.target === sourceNode) {
    return
  }
  formData.value.advancedConfig?.urlList.forEach((item, index) => {
    if (item.id == e.target.id) {
      targetIndex = index
    }
  })
}
let handleDragEnd = (e) => {
  e.target.classList.remove('moving')
}
</script>
<style scoped lang="scss">
.text-list {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  box-shadow: 0px 1px 5px 0px rgba(0, 21, 41, 0.1);
  padding: 6px;
  box-sizing: border-box;
  border-radius: 6px;
  cursor: move;
  &-right {
    cursor: pointer;
  }
  &-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  &-content {
    display: flex;
    flex-direction: column;
    row-gap: 10px;
    margin-top: 10px;
  }
  &-input {
    width: 120px;
  }
}
.drag-move, /* 对移动中的元素应用的过渡 */
.drag-enter-active,
.drag-leave-active {
  transition: all 0.5s ease;
}

.drag-enter-from,
.drag-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

/* 确保将离开的元素从布局流中删除
  以便能够正确地计算移动的动画。 */
.drag-leave-active {
  position: absolute;
}
.moving {
  border: 1px dashed #ddd;
  color: transparent;
  background: transparent;
  z-index: 100;
}
.moving div {
  visibility: hidden;
}
.text-content {
  display: flex;
  flex-direction: column;
  row-gap: 16px;
}
</style>
